import classnames from "classnames";
import Icon from "@/components/Icon";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { Channel, RootState } from "@/types/store";
import { differenceBy } from "lodash";
import { addChannel, changeActive, delChannel, getAllChannel } from "@/store/actions/home";
import { useState } from "react";
import useInitialState from "@/utils/use-initial-state";

type Props = {
  hide: () => void;
};
function Channels({ hide }: Props) {
  const dispatch = useDispatch();
  useInitialState(getAllChannel, "home");
  const { userChannels, allChannels, active } = useSelector((state: RootState) => state.home);
  // 筛选出过滤后的频道
  // const optionChannels = useSelector((state: RootState) => {
  //   const { userChannels, allChannels } = state.home;
  // return allChannels.filter((x) => {
  //   const idx = userChannels.findIndex((y) => y.id === x.id);
  //   return idx === -1 ? true : false;
  // });
  // 使用lodash组件进行筛选功能
  //   return differenceBy(allChannels, userChannels, "id");
  // });

  // 使用lodash组件筛选出过滤后的频道
  const optionChannels = differenceBy(allChannels, userChannels, "id");
  // console.log(optionChannels, allChannels, userChannels);

  // 点击选中我的频道,切换selected值，切换完之后直接过去，关闭弹窗
  const hanndleMyChannel = (id: number) => {
    dispatch(changeActive(id));
    hide();
  };
  // 添加频道
  const addChannelFn = (channel: Channel) => {
    console.log(channel);
    dispatch(addChannel(channel));
  };
  // 删除频道
  const delChannelFn = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>, id: number) => {
    e.stopPropagation();
    dispatch(delChannel(id));
  };
  // 是否是编辑状态
  const [isEdit, setIsEdit] = useState(false);
  const changeEdit = () => {
    setIsEdit(!isEdit);
  };
  // 退出频道编辑
  const goBack = () => {
    hide();
    // 重置编辑状态
    setIsEdit(false);
  };
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="icon-guanbi2" onClick={goBack} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames("channel-item", isEdit && "edit")}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span className="channel-item-title-extra">{isEdit ? "点击删除频道" : "点击进入频道"}</span>
            <span className="channel-item-edit" onClick={changeEdit}>
              {isEdit ? "完成" : "编辑"}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannels.map((item) => {
              return (
                <span key={item.id} onClick={() => hanndleMyChannel(item.id)} className={classnames("channel-list-item", { selected: item.id === active })}>
                  {item.name}
                  <span onClick={(e) => delChannelFn(e, item.id)}>
                    <Icon type="icon-guanbi3" />
                  </span>
                </span>
              );
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {optionChannels.map((item) => {
              return (
                <span onClick={() => addChannelFn(item)} className="channel-list-item" key={item.id}>
                  + {item.name}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Channels;
